<template>
	<div class="container">
		<v-toolBar :fullPath="postData.opera" :tableColumns="tableColumns" @changeLie="getChangeLie"
			@getSearchIPArr="getToolBarSearchIPArr" @getSearchIP="getToolBarSearchIP">
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableDataFn" border style="width: 100%" stripe>
			<el-table-column type="index" width="50" label="序号"> </el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :width="item.width"
					align="center" v-if="item.isShow" :key="item.prop">
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	import {
		getItemMonitorDbInvalidObject
	} from "@/api/index.js";
	import vPagination from "../../../../common/Pagination.vue";
	import vToolBar from "../../toolbar/Toolbar.vue";
	import tableColumns from "./DbInvalidObjectTableColumns";
	import bus from "common/bus.js";

	export default {
		components: {
			vPagination,
			vToolBar,
		},
		data() {
			return {
				postData: {
					opera: "dbConnect",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						DBTYPE: "Oracle"
					},
				},
				tableData: [],
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: "",
				timerName: "MonitorInfoDataBaseIncalidObject",
				timerEventName: "timerMonitorInfoDataBaseIncalidObject",
				// timerInterval: 1000 * 60,
				loading: false,
				selectedMonID: "",
			};
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorALL/getItem"];

			this.postData.filters.ip = this.selectedMonID.IP;
			this.getTableData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getTableData();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorALL", (msg) => {
				this.resetData();
				this.selectedMonID = msg;
				this.postData.filters.ip = this.selectedMonID.IP;

				this.getTableData();
			});
		},
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					// if (item.ISENABLED == 'Y') {
					return item;
					// }
				});
			},
			timerInterval() {
				return Number(this.$store.state.pageRefresh) * 1000;
			},
		},
		methods: {
			getTableData() {
				this.loading = true
				getItemMonitorDbInvalidObject({
					// ip: this.selectedMonID.IP,
					cid: this.selectedMonID.MONID,
					pageNum: this.postData.curPage,
					pageSize: this.postData.pageSize,
				}).then((_) => {
					this.tableData = (Object.values(_)[0] ? Object.values(_)[0] : []).map((_) => {
						return {
							CID: _.cid,
							OWNER: _.owner,
							OBJECTNAME: _.objectName,
							OBJECTTYPE: _.objectType,
							OBJECTSTATUS: _.objectStatus,
							RECORDTIME: _.recordTime,
							SN: _.sn,
						};
					});
					this.dataTotal = Number(Object.keys(_)[0]);

				}).finally(() => {
					this.loading = false;
				});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr,
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.postData.filters = {
					ip: this.SearchIP,
				};
				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			resetData() {
				this.dataTotal = 0;
				this.tableData = [];
			},
		},
		watch: {},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>